<template>
    <!--新建套餐-->
    <div>
        <Modal Modal
               v-model="modal1"
               title="新建套餐">
            <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate" :label-width="80">
                <FormItem label="套餐名称" prop="meal">
                    <Input v-model="formValidate2.meal" placeholder="请输入套餐名称"></Input>
                </FormItem>
                <FormItem label="价格" prop="pay_fee">
                    <Input v-model="formValidate2.pay_fee" placeholder="请输入套餐价格"></Input>
                </FormItem>
                <FormItem label="次数" prop="count">
                    <Input v-model="formValidate2.count" placeholder="请输入数量"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="addMeal('formValidate2')">创建</Button>
                <Button type="text" @click="cancel()" style="margin-left: 8px">取消</Button>
            </div>
        </Modal>
        <!--        <Modal Modal-->
        <!--               v-model="modal2"-->
        <!--               title="套餐修改"-->
        <!--        >-->
        <!--            <Form ref="formValidate1" :model="formValidate1" :rules="ruleValidate" :label-width="80">-->
        <!--                <FormItem label="套餐名称" prop="meal">-->
        <!--                    <Input v-model="formValidate1.meal" placeholder=""></Input>-->
        <!--                </FormItem>-->
        <!--                <FormItem label="价格" prop="pay_fee">-->
        <!--                    <Input v-model="formValidate1.pay_fee" placeholder=""></Input>-->
        <!--                </FormItem>-->
        <!--                <FormItem label="次数" prop="count">-->
        <!--                    <Input v-model="formValidate1.count" placeholder=""></Input>-->
        <!--                </FormItem>-->
        <!--            </Form>-->
        <!--        </Modal>-->
        <!--删除提示-->
        <Modal v-model="modal3" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>是否删除</span>
            </p>
            <div style="text-align:center">
                <p>请谨慎操作</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="delMeal()">删除</Button>
            </div>
        </Modal>
        <!--错误信息提示-->
        <Modal v-model="modal4" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>错误</span>
            </p>
            <div style="text-align:center">
                <p>{{errmsg}}</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" @click="err()">确定</Button>
            </div>
        </Modal>
        <div style="text-align: right">
            <Button type="primary" @click="addMeal1()">新建套餐</Button>
        </div>
        <br>
        <Table border :columns="columns12" :data="dataShow" stripe :loading="spinShow">
            <template slot-scope="{ row }" slot="meal">
                <strong>{{ row.meal }}</strong>
            </template>
            <template slot-scope="{ row }" slot="action">
                <!--                <Button type="primary" size="small" style="margin-right: 5px" @click="modal2 = true" v-on:click="getRowData(row)">编辑</Button>-->
                <Button type="error" size="small" @click="remove(row)">删除</Button>
            </template>
        </Table>
        <br>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page show-total show-elevator :total="total" @on-change="change"/>
            </div>
        </div>
<!--        <Spin size="large" fix v-if="spinShow"></Spin>-->
    </div>
</template>
<script>

import { addMeal, delMeal, getMealList } from '../../../../api/registered/ocr'

export default {
  data () {
    return {
      // 加载中
      spinShow: true,
      modal_loading: false,
      // 错误信息
      errmsg: '',
      // 新建套餐弹出框状态
      modal1: false,
      // 修改套餐弹出框状态
      modal2: false,
      // 删除提示框
      modal3: false,
      // 删除-错误信息提示
      modal4: false,
      /* 分页开始 */
      // 调接口后返回的数据
      pageData: [],
      // 总共多少条数据，谁便给个默认值
      total: 1,
      // 一页显示多少条数据
      pageSize: 10,
      // 共几页，谁便给个默认值
      pageNum: 1,
      // 选定页显示的数据
      dataShow: [],
      // 选择第几页，谁便给默认值
      currentPage: 1,
      /* 分页结束 */
      del: {
        id: ''
      },
      formValidate: {
        id: '',
        meal: '',
        pay_fee: '',
        count: ''
      },
      // 修改套餐数据存储对象
      formValidate1: {
        id: '',
        meal: '',
        pay_fee: '',
        count: ''
      },
      // 新建套餐数据存储对象
      formValidate2: {
        meal: '',
        pay_fee: '',
        count: ''
      },
      // 校验表单
      ruleValidate: {
        meal: [
          { required: true, message: '请输入套餐名称', trigger: 'blur' }
        ],
        pay_fee: [
          { required: true, message: '请输入套餐价格', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请输入套餐次数', trigger: 'blur' }
        ]
      },
      // 套餐列表列名对应
      columns12: [
        {
          title: '套餐名称',
          slot: 'meal'
        },
        {
          title: '套餐金额',
          key: 'pay_fee'
        },
        {
          title: '次数',
          key: 'count'
        },
        {
          title: '编辑',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ]
    }
  },
  mounted () {
    // 获取套餐信息
    this.initialize()
  },
  methods: {
    // 点击页码后展示数据
    change (page) {
      this.dataShow = this.pageData[page - 1]
    },
    // 初始化
    initialize () {
      this.spinShow = true
      getMealList().then(ret => {
        if (ret.data.errcode === 1001) {
          // 一共多少条数据，在分页出展示一下
          this.total = ret.data.data.length
          // 获取后台用户列表数据,根据后台数据的条数和每页显示数量算出一共几页,得0时设为1
          this.pageNum = Math.ceil(ret.data.data.length / this.pageSize) || 1
          for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5(对slice操作来说是0-5)条，第二页是6-10(对slice操作来说是5-10)条...
            this.pageData[i] = ret.data.data.slice(this.pageSize * i, this.pageSize * (i + 1))
            // 默认显示第一页
            this.dataShow = this.pageData[0]
            // 关闭加载动画
            this.spinShow = false
          }
        } else {
          // 关闭加载动画
          this.spinShow = false
          this.warning()
        }
      })
    },
    // 提示信息
    success () {
      this.$Message.success('成功')
    },
    warning () {
      this.$Message.warning('失败')
    },
    // 点击添加套餐按钮是打开模态框，清除储存的数据
    addMeal1 () {
      this.formValidate2.pay_fee = ''
      this.formValidate2.meal = ''
      this.formValidate2.count = ''
      this.modal1 = true
    },
    // 添加套餐
    addMeal (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          addMeal(this.formValidate2).then(ret => {
            // 返回成功
            if (ret.data.errcode === 1001) {
              this.modal1 = false
              this.initialize()
              // 提示成功
              this.success()
            } else {
              // 提示失败
              this.warning()
            }
          })
        } else {
        }
      })
    },
    cancel () {
      this.modal1 = false
    },
    err () {
      this.modal4 = false
    },
    err1 () {
      this.modal4 = true
    },
    // 删除套餐
    remove (row) {
      this.modal3 = true
      // 获取要删除数据的id
      this.del.id = row.id
    },
    // 删除套餐
    delMeal () {
      // 弹出是否删除提示框
      this.modal_loading = true
      // 执行删除接口
      delMeal(this.del).then(ret => {
        // 删除失败
        if (ret.data.errcode === -1) {
          // 弹出提示信息
          this.errmsg = ret.data.errmsg
          // 关闭删除框
          this.modal_loading = false
          this.modal3 = false
          // 打开错误信息提示
          this.modal4 = true
        } else {
          this.modal_loading = false
          this.modal3 = false
          this.success()
        }
        this.initialize()
      })
    },
    // 点击编辑时数据回显
    getRowData (row) {
      this.formValidate1.meal = row.meal
      this.formValidate1.pay_fee = row.pay_fee
      this.formValidate1.count = row.count
    }
  }
}
</script>
